CSS3 과도 효과 전환

자세 한 방문
http://www.w3school.com.cn/css3/css3_transition.asp
css 3 의 transition 이란 기 존 css 를 바 꿀 때 과도 적 인 효과 가 나타 나 는 것 입 니 다.
예컨대







< p > 노란색 div 요소 에 마우스 포인 터 를 올 려 과도 효 과 를 보십시오. < /p>
< p > < b > 주석: < / b > 이 예 는 Internet Explorer 에서 유효 하지 않 습 니 다. < /p>


노란색 div 요소 에 마우스 포인 터 를 올 려 과도 효 과 를 보 세 요.
설명: 이 예 는 Internet Explorer 에서 유효 하지 않 습 니 다.
우리 가 마 우 스 를 div 위로 이동 할 때 너비 가 달라 집 니 다. 그러면 우 리 는 정의 합 니 다.
transition:width 2s;그러면 이 너비 변화 과정 은 2 초 간 지 속 됩 니 다.
Internet Explorer 는 transition 속성 을 지원 하지 않 습 니 다.
Firefox 4 는 접두사 - moz - 가 필요 합 니 다.
크롬 과 Safari 는 접두사 - webkit - 가 필요 합 니 다.
Opera 는 접두사 - o - 가 필요 합 니 다.
transition 속성 은 네 개의 과도 속성 을 설정 하 는 데 사용 되 는 약자 속성 입 니 다.
transition-property
transition-duration
transition-timing-function
transition-delay
문법

transition-property: none|all|property;

값.
묘사 하 다.
none
속성 이 없 으 면 과도 효 과 를 얻 을 수 있 습 니 다.
all
모든 속성 은 과도 효 과 를 얻 을 수 있 습 니 다.
property
과도 효 과 를 적용 할 CSS 속성 이름 목록 을 정의 합 니 다. 목록 은 쉼표 로 구 분 됩 니 다.

transition-duration: time;

값.
묘사 하 다.
time
과도 효 과 를 완성 하 는 데 걸 리 는 시간 (초 또는 밀리초 로 계산) 을 규정 합 니 다.기본 값 은 0 으로 효과 가 없다 는 것 을 의미 합 니 다.
문법

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n);

값.
묘사 하 다.
linear
같은 속도 로 시작 하여 끝 날 때 까지 의 과도 효과 (cubic - bezier (0, 0, 1, 1) 를 규정 합 니 다.
ease
느 린 속도 로 시작 한 다음 에 빨 라 지고 느 린 속도 로 끝 나 는 과도 효과 (cubic - bezier (0.25, 0.1, 0.25, 1) 를 규정 합 니 다.
ease-in
느 린 속도 로 시작 하 는 과도 효과 (cubic - bezier (0.42, 0, 1, 1) 를 규정 합 니 다.
ease-out
느 린 속도 로 끝 나 는 과도 효과 (cubic - bezier (0, 0, 0.58, 1) 를 규정 합 니 다.
ease-in-out
느 린 속도 로 시작 하고 끝 나 는 과도 효과 (cubic - bezier (0.42, 0, 0.58, 1) 를 규정 합 니 다.
cubic-bezier(n,n,n,n)
cubic - bezier 함수 에서 자신의 값 을 정의 합 니 다.가능 한 값 은 0 에서 1 사이 의 수치 입 니 다.

transition-delay: time;

값.
묘사 하 다.
time
과도 효과 가 시작 되 기 전에 기 다 려 야 할 시간 을 초 또는 밀리초 로 정 합 니 다.